import React, { useEffect } from 'react';
import { Row, Col, message } from 'antd';
import Question from '../../../../components/Question';
import RuleScoreCaseItem from './ruleScoreCaseItem';
import { randomKey } from '../../../../utils/utils';

export default function RuleScoreCase(props) {
  const { value = [] } = props;

  useEffect(() => {
    if (value.length > 0) {
      return;
    }
    //如果没有value, 则 添加两条
    addCase();
    addCase();
  }, []);

  //添加分箱
  function addCase() {
    const case_item = {
      id: randomKey(),
      score: undefined,
      conditions: []
    };
    value.push(case_item);
    props.onChange && props.onChange(value);
  }

  const handleChange = (id, _value) => {
    value.forEach((item) => {
      if (item.id === id) {
        item = _value;
      }
    });
    props.onChange && props.onChange(value);
  };

  // 删除
  function del(index) {
    if (value.length <= 2) {
      message.warning('每条规则至少2个分箱区间');
      return;
    }
    value.splice(index, 1);
    props.onChange && props.onChange(value);
  }
  return (
    <div className='score-case'>
      <Row type='flex' justify='space-between' className='rule-hd'>
        <Col span={4} style={{ paddingLeft: '10px' }}>
          编号
        </Col>
        <Col span={8}>
          <span className='flex'>
            {' '}
            分箱区间
            {/* <Question
              title={
                <>
                  <h2>示例：申请人学历</h2>
                  <p>1. 分箱区间和分值一一对应，一个分箱包含一个分值（分值均为整数）</p>

                  <p>2. 分箱区间数值型以左开区间，右闭区间进行定义（左小于右），枚举型以是否落入分箱内的值进行判断</p>

                  <p>3. 所有不涉及分箱区间的值，包括缺失和异常，都通过填写默认分来保证策略继续进行计算</p>
                </>
              }
            /> */}
          </span>
        </Col>
        <Col span={8}>
          <span className='flex'>
            分值
            <Question
              title={
                <>
                  <h2>示例：申请人学历</h2>
                  <p>1. 分箱区间和分值一一对应，一个分箱包含一个分值（分值均为整数）</p>

                  <p>2. 分箱区间数值型以左开区间，右闭区间进行定义（左小于右），枚举型以是否落入分箱内的值进行判断</p>

                  <p>3. 所有不涉及分箱区间的值，包括缺失和异常，都通过填写默认分来保证策略继续进行计算</p>
                </>
              }
            />
          </span>
        </Col>
        {!props.disabled && <Col span={4}>操作</Col>}
      </Row>
      {value.map((item, index) => {
        return (
          <RuleScoreCaseItem
            {...props}
            value={item}
            key={item.id}
            index={index}
            len={value.length}
            onChange={handleChange.bind(this, item.id)}
            data_type={props.data_type}
            cases={value}
            onDel={del.bind(this, index)}
            onAdd={addCase}
            compareData={(props.compareData && props.compareData[index]) || undefined}
          />
        );
      })}
    </div>
  );
}
